<template>
  <view class="page bg-white">
    <view class="main">
      <!-- 上课教室 -->
      <view>
        <u-text margin="0 10rpx" color="#333" size="32rpx" text="上课教室" bold></u-text>
        <view class="form-item" @click="showClassroomPopup = true">
          <u-text :text="formData.classroom || '请选择上课教室'" size="32rpx"
            :color="formData.classInfo ? '#333' : '#999'"></u-text>
          <u-icon name="arrow-down" size="32rpx" color="#999"></u-icon>
        </view>
      </view>

      <!-- 教室 -->
      <up-picker :closeOnClickOverlay="true" :show="showClassroomPopup" :columns="classroomList"
        @close="showClassroomPopup = false" @confirm="handleClassroomConfirm"></up-picker>
    </view>
    <view class="footer" :style="{ boxShadow: '0rpx -4rpx 36rpx 0rpx ' + themeTertiary }">
      <u-button shape="circle" size="large" :color="themePrimary" text="保存"></u-button>
    </view>
  </view>
</template>
<script setup>
import { ref } from 'vue'
import { useTheme } from '@/composables/useTheme';
import dayjs from 'dayjs';
const { themePrimary, themeSecondary, themeTertiary } = useTheme();

// 班级性质弹窗
const showClassTypePopup = ref(false)
// 班主任弹窗
const showTeacherPopup = ref(false)
// 年级弹窗
const showGradePopup = ref(false)
// 教室弹窗
const showClassroomPopup = ref(false)
// 上课时间弹窗
const showClassTimePopup = ref(false)
// 开始和结束日期弹窗
const showStartDate = ref(false)
const showEndDate = ref(false)

const formData = ref({
  startDate: '',
  endDate: '',
  classType: null,
  teacher: null,
  grade: null,
  classroom: null,
  classTime: null,
  studentInfo: null,
  birthday: '',
  guardians: [],
  recentScoreType: null, //近期成绩录入类型
  chineseScore: '',
  mathScore: '',
  englishScore: ''
})

const classroomList = ref([['教室1', '教室2']])

// 教室选择器确认
const handleClassroomConfirm = (e) => {
  console.log(e)
  showClassroomPopup.value = false
  formData.value.classroom = e.value[0]
}

</script>
<style scoped lang="scss">
.form-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #F7F7F7;
  padding: 30rpx;
  margin-top: 20rpx;
  border-radius: 20rpx;
}

.camera-icon {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 54rpx;
  height: 54rpx;
}
</style>